<!DOCTYPE html>
<html lang="zn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>Vue中的数据代理</title>
</head>
<body>
  <!-- 
    Vue中的数据代理
      1.Vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)
      2.Vue中数据代理的好处:更加方便的操作data中数据
      3.基本原理
        a.通过object.defineProperty()把daya对象中所有属性添加到vm上
        b.为每一个添加到vm上的属性,都指定一个getter setter
        c.在getter setter内部去操作(读/写)data中对应的属性
    Vue将data中的数据拷贝了一份到_data属性中,又将_data里面的属性提到Vue实例中(如name),通过defineProperty实现数据代理,这样通过getter/setter操作name,进而操作_data中的name.而_data又对data进行数据劫持,实现响应式
   -->
  <!-- 创建一个容器 -->
  <div id="root">
    这里是{{province.toUpperCase() }},{{city}}
  </div>

  <script>
    Vue.config.productionTip = false
    // 创建一个Vue实例
    const vm = new Vue({
      el:'#root',
      data(){
      return{
        province:'guangdong',
        city:'深圳'
      }
    }
    })
    
  </script>
</body>
</html>